import React from 'react';
import ReactDOM from 'react-dom';
import mirror, { connect, actions } from 'mirrorx';
import { Carousel, WhiteSpace, WingBlank, List } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;


class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            barWidth: "auto",
            productTypeList: [],
            productList: []
        }
      
    }

    componentDidMount() {       
        this.requestHomeList();
    }

    setBarWidth = () => {
        let scrollBar = T.get("scrollBar");
        let children = scrollBar.children;
        let len = 0;
        for (let i = 0; i < children.length; i++) {
            len += children[i].offsetWidth + 20;
        }

        this.setState({ barWidth: len + 10 })
    }
  
    requestHomeList = () => { //获取home列表 初始  
        T.fetch({   //请求home
            url: "/cms/goods/list.json",
            loading:true,    
            data: {
                 "siteCode": "weixin",  
                 "code": "weixin_home",
                 "isNeedMaterialContent": true
            }
        }).then((res) => {
            if (res.success) {                
                this.requestOtherList(res.value);
            }
        })

    }

    requestOtherList =(homeList)=>{       
        let list =  []; 
        if(homeList[0])
        list = homeList[0].childList;            
        for(var i = 0;i < list.length; i++){
            if(list[i].type == "NO_NAVIGATION_BAR" && list[i].materialType == "ADVERTISEMENT"){
                  T.fetch({   //请求banner列表
                    url: "/cms/goods/list.json",
                    data: {
                        "siteCode": "weixin",  
                        "code": list[i].code,
                        "isNeedMaterialContent": true
                    }
                }).then((res) => {
                    if (res.success) {                       
                        this.setState({
                            bannerList: res.value[0].materialList
                        })
                    }
                })   
            }
             if(list[i].type == "NAVIGATION_BAR" && list[i].materialType == "GOODS"){
                  T.fetch({   //请求productTypeList 商品分类列表
                    url: "/cms/goods/list.json",
                    data: {
                        "siteCode": "weixin",  
                        "code": list[i].code,
                        "isNeedMaterialContent": true
                    }
                }).then((res) => {
                    if (res.success) {                                             
                        this.setState({ productTypeList: res.value[0].childList}, () => {
                            this.setBarWidth();
                        })
                        this.tabClick(res.value[0].childList[0].code);
                    }
                })   
            }
        }
    }
    tabClick = (code) => {            
            this.setState({
                typeCode:code
            })
            T.fetch({   //请求分类的商品列表
                    url: "/cms/goods/list.json",
                    data: {
                        "siteCode": "weixin",  
                        "code": code,
                        "isNeedMaterialContent": true
                    }
                }).then((res) => {
                    if (res.success) { 
                        let media = res.value[0].materialList; 
                         var m = 0,
                              n = 0,
                              t = 0;  
                            for (m = 0; m < media.length; m++) {  
                                for (n = 0; n < media.length; n++) {  
                                    if (media[m].seq >= media[n].seq) {                                          
                                        t = media[m];  
                                        media[m] = media[n];  
                                        media[n] = t;  
                                    }  
                                }  
                            }  
                        this.setState({
                           productList: media
                        })
                    }
                })   
    }
    toProductDetail=(url)=>{  //跳转到相应的商品详情页
        actions.routing.push(url) 
    }

    render() {
        const productList = this.state.productList; 
        const bannerList = this.state.bannerList;      
        return (<div className="main product-list bor-top">
         { bannerList &&
            <Carousel
                autoplay={true}
                infinite
                selectedIndex={0}
                beforeChange={(from, to) => console.log()}
                afterChange={index => console.log()}
            >
                { bannerList && bannerList.map((item,index) => (
                    <a
                        key={index}
                        href={item.materialUrl || 'javascript:;'}
                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                    >
                        <img
                            src={item.materialMediaList[0].uploadUrl}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                                // fire window resize event to change height
                                window.dispatchEvent(new Event('resize'));
                                this.setState({ imgHeight: 'auto' });
                            }}
                        />
                    </a>
                ))}
            </Carousel>}

            <div className="scroll-view">
                <ul className="scroll-bar bor-bottom" id="scrollBar" style={{ width: this.state.barWidth }}>
                    {this.state.productTypeList.map((item, index) => <li
                        onClick={() => this.tabClick(item.code)}
                        className={"scroll-item fl " + (this.state.typeCode == item.code ? "active" : "")}
                        key={index}>{item.name}</li>
                    )}
                </ul>
            </div>
            {productList  &&
            <div className="content-view">              
                <ul id="cardsList">
                    <li className="content-item cards-list-view" >
                        <ul className="card-list">
                            {productList  && productList.map((item, index) =>
                                <div key={index}>
                                {item.type=='GOODS' && 
                                <li className="card" onClick={ ()=>this.toProductDetail(item.materialUrl) }>
                                    {item.materialMediaList && item.materialMediaList.map((media,ii)=>
                                        <div key={ii}>
                                            {media.category=='MASTER' &&
                                                <img className="card-img" src={media.uploadUrl} />
                                            }  
                                        </div>                                      
                                    )}                                    
                                    <div className="intro">
                                        <p className="title f30 fc0">{item.title}</p>
                                        <p className="desc f26 fc8">{item.materialGoods.recommendedReason}</p>
                                    </div>
                                </li>
                            }
                            </div>
                            )}                            
                        </ul>
                    </li>
                </ul>
            </div>
            }
        </div>
        )
    }
}

export default App;   